<template xmlns="http://www.w3.org/1999/html">
  <div style="height:100%;width:100%;background-image: url(../../../static/img/login_bg.jpg)">
    <div class="login-wrap">
      <div class="ms-login">
        <el-form :model="user" :rules="rules" ref="user" label-width="0px" class="demo-ruleForm">
          <el-form-item>
            <img class="log-img" src="../../../static/img/logo1.png"/>
            <div class="ms-title">官网后台管理</div>
          </el-form-item>
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-star-off" v-model="user.username" placeholder="用户名"
                      @keyup.enter.native="submitForm('user')"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" prefixIcon="el-icon-date" placeholder="密码" v-model="user.password"
                      @keyup.enter.native="submitForm('user')"></el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button prefix-icon="el-icon-date" type="primary" @click="submitForm('user')">登录</el-button>
          </div>
          <p style="font-size:12px;line-height:30px;color:#999;"></p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../../common/constant.js'
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
  export default {
    components: {ElFormItem},
    data: function () {
      return {
        user: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        const self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$http.post('/api/user/login', self.user)
              .then(function (response) {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.$message({
                    message: '登录成功！',
                    type: 'success'
                  });
                  sessionStorage.setItem('user',JSON.stringify(responseData.data))
                  self.$router.push({path: '/main'})
                } else {
                  self.$message.error('登录失败 !' + responseData.message + '^_^;');
                }
              })
              .catch(function (error) {
                this.$message.error('登录系统异常，联系管理员处理！^_^;');
              });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .login-wrap {
    position: relative;
    top: 22%;
    left: 55%;
    z-index: 10;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 0.7;
    width: 300px;
    height: 320px;
  }

  .ms-title {
    text-align: left;
    float: left;
    margin: 23px 0 0 20px;
    font-size: 22px;
    font-weight: 400;

  }

  .ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 100%;
    margin: -150px 0 0 -190px;
    padding: 40px;
    border-radius: 5px;
    background: #fff;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 100%;
    height: 36px;
  }

  .log-img {
    margin: 5px 5px 5px 40px;
    float: left;
    height: 50px;
  }
</style>
